<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    视口，调整页面适应移动端
                width=device-width：页面宽度与设备宽度一致
                initial-scale=1：初始缩放为1，即不会缩放
                minimum-scale=1：最小缩放比
                maximum-scale=1：最大缩放比
                user-scalable=no：用户自定缩放
        -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link href="../0918/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--    如下第三方库的JS一般写在head标签中-->
    <script src="../0918/js/jquery-3.5.1.js"></script>
    <script src="../0918/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" id="btn_disabled" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-default btn-lg disabled">Button</button>
<script>
    let btn_disabled = document.querySelector("#btn_disabled");
    console.log(btn_disabled);
    console.dir(btn_disabled);
    btn_disabled.onclick = function () {
        console.log(1);
        console.log(this);
    }
</script>
<br>
图片按钮
<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
</button>

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</body>
</html>